<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>旅游注册</title>
</head>
<!--vue-->
<script src="/js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="/css/index.css">

<!-- 引入组件库 -->
<script src="/js/index.js"></script>
<!--axios-->
<script src="/js/axios.min.js"></script>
<!--引入外部css样式-->
<link rel="stylesheet" href="../css/register.css">

<body>
<div class="box">
    <img src="../img/login/register.jpg" alt=""/>
    <div class="login-content">
        <div class="login-title">
            <h2>注册</h2>
            已有账号？<a href="login.html">登录!</a>
        </div>
        <form action="" method="post">
            <div class="input-group">
                账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：<input type="text" id="account" v-model="account"
                                                                    name="account" class="account"/>
                <br/><br/>
                密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="password" class="password"
                                                                    name="password" v-model="password"/>
                <br/><br/>
                确认密码：<input type="password" id="confirmPassword" class="confirmPassword" name="confirmPassword"
                            v-model="confirmPassword"/>
                <br/><br/>
                真实姓名：<input type="text" id="name" v-model="name" name="name" class="name" v-model="name"/>
                <br/><br/>
                昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：<input type="text" id="smallname" v-model="smallname"
                                                                    name="smallname" class="smallname" value=""
                                                                    v-model="smallname"/>
                <br/><br/>
                性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label>
                    <input type="radio" name="sex" value="1" v-model="sex">&nbsp;&nbsp;男
                </label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label>
                    <input type="radio" name="sex" value="2" v-model="sex"/>&nbsp;&nbsp;女
                </label>
                <br/><br/>
                手&nbsp;&nbsp;机&nbsp;号： <input type="text" id="mobile" name="mobile" class="mobile" v-model="mobile"
                                              @blur="checkMobile"/>
            </div>
            <div class="col">
                <input type="text" id="verifyCode" name="verifyCode" class="verifyCode" v-model="verifyCode"
                       placeholder=" 请输入验证码！"/>
                <button type="button" id="fetchCode" class="fetchCode" :class="{ codeGeting:isGeting }"
                        @click="fetchCode">
                    {{getCode}}
                </button>
                <br/>
                <br/>
                <button type="button" id="register" class="btn" @click="register">注册</button>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    var vue = new Vue({
        el: ".box",
        data: {
            account: '',
            password: '',
            confirmPassword: '',
            name: '',
            smallname: '',
            sex: '',
            mobile: '',
            verifyCode: '',
            getCode: '发送验证码',
            isGeting: false,
            count: 60,
        },

        methods: {
            /**
             * 注册按钮
             */
            register() {
                _this = this;
                if (this.mobile == '' || this.password == '') {
                    _this.$message.error("用户名和密码不能为空！");
                    return;
                } else if (this.password != this.confirmPassword) {
                    _this.$message.error("两次密码不一致");
                    return;
                } else if (this.name == '' || this.smallname == '') {
                    _this.$message.error("姓名和昵称不能为空！");
                    return;
                }

           //     alert(this.sex);
                if (this.sex == '') {
                    _this.$message.error("请选择您的性别");
                    return;
                }

                /*用户注册*/
                axios.post('/tuser/add?account=' + this.account + "&password=" + this.password
                    + "&name=" + this.name + "&smallname=" + this.smallname
                    + "&sex=" + this.sex.toString() + "&mobile=" + this.mobile).then(function (response) {
                    if (response.data.code == 200) {
                        location.href = "/html/login.html";
                    }
                }).catch(function (error) {
                    _this.$message.error("出错");
                });
            },

            verify() {
                _this = this
                if (this.mobile == '' || this.password == '') {
                    _this.$message.error("用户名和密码不能为空！");
                    return;
                }
                if (this.name == '' || this.smallname == '') {
                    _this.$message.error("姓名和昵称不能为空！");
                    return;
                }
                if (this.password != this.confirmPassword) {
                    _this.$message.error("两次密码必须一致");
                    return;
                }
                if (this.sex == '') {
                    _this.$message.error("必须选择您的性别");
                    return;
                }
                axios.post('/tuser/verify?verifyCode1=' + this.verifyCode)
                    .then(function (response) {
                        if (response.data.code == 200) {
                            _this.register();
                        }
                        if (response.data.code == 500) {
                            _this.$message.error("验证码输入错误！！！")
                        }
                    })

            },

            checkMobile() {
                _this = this;
                /**
                 * input失焦验证手机号
                 */

                axios.post('/tuser/checkMobile?mobile=' + this.mobile).then(function (response) {
                    if (response.data.code == 200) {
                        _this.$message.error("您输入的手机号已存在！！！");
                        _this.mobile = '';
                    }
                }).catch(function (error) {
                    _this.$message.error("出错");
                });
            },

            /**
             *输入手机号获取验证码
             */
            fetchCode() {
                _this = this
                var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
                if (this.mobile == '') {
                    _this.$message.error("请输入手机号！！！");
                    return;
                } else if (!phonereg.test(this.mobile)) {
                    _this.$message.error("请输入有效的手机号！！！");
                    return;
                }

                var countDown = setInterval(() => {
                    if (this.count < 1) {
                        this.isGeting = false;
                        this.disable = false;
                        this.getCode = '获取验证码';
                        this.count = 6;
                        clearInterval(countDown);
                    } else {
                        this.isGeting = true;
                        this.disable = true;
                        this.getCode = this.count-- + 's后重发';
                    }
                }, 1000);
                axios.post('/tuser/createCode?mobile=' + this.mobile).then(function (response) {
                    if (response.data.code == 200) {
                        alert("验证码发送成功！！！")
                    }
                }).catch(function (error) {
                    this.$message.error("验证码发送失败！！！");
                });
            },

        }
    });
</script>
</html>